<template>
  <div>
    <div class="wrap">
      <div :class="oType == 3 ? 'flex-Box-2' : 'flex-Box'">
        <ul class="flex" v-for="item in num" :key="item.id">
          <ScrollNum
            v-for="(num, idx) of item.numArr"
            ref="scroll"
            :key="idx"
            as="li"
            :i="num"
            :state="item.bok"
            :index="idx"
          />
        </ul>
      </div>
      <div class="btnBox" v-if="oType != 4">
        <!-- 开始抽奖 -->
        <img
          src="../../assets/fx/ss.png"
          style="width: 248px"
          @click="raffle"
          class="btn"
          alt=""
        />
        <!-- 下一轮 -->
        <img
          src="../../assets/fx/next.png"
          style="width: 248px"
          alt=""
          class="btn"
          @click="nextRaffle"
        />
      </div>
      <img
        src="../../assets/fx/show.png"
        @click="show = true"
        class="showm"
        alt=""
      />
      <div class="detail" v-show="show">
        <!-- 背景遮罩 -->
        <img src="../../assets/fx/11.png" class="detail-bg" alt="" />
        <!-- <img src="../../assets/fx/22222.png" class="detail-bg-2" alt="" /> -->

        <!-- 返回按钮 -->
        <img
          src="../../assets/fx/back.png"
          class="back"
          @click="(show = false), (page = 1)"
          alt=""
        />
        <!-- 下一页按钮 -->
        <img
          src="../../assets/fx/next-icon.png"
          class="next-icon"
          @click="nextHandle"
          alt=""
        />
        <!-- 奖品名称 -->
        <h3>{{ setTitle() }}</h3>

        <ul class="list">
          <li v-for="(item, idx) in setLuckHistoryList()" :key="idx">
            <template>
              <div class="d-item">
                <p>{{ item.state == 1 ? item.randomNumber : '??????' }}</p>
                <span v-if="item.state == 1">{{ item.sp }}</span>
              </div>
            </template>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

import ScrollNum from '../../components/Numtest/index2.vue'
import { jackpotExecute, getMemberGiftRecordByActivity, resetServiceCardStatusByIds, resetServiceCardStatusByActivityId } from '../../api/luckInterface'
export default {
  name: 'App',
  components: { ScrollNum },
  data () {
    return {
      num: [], // 当前页面显示的抽奖号码
      aniState: false, // 防止重复点击抽奖按钮开关
      aniState2: false, // 防止重复点击下一轮开关
      oType: 0, // 抽奖轮次
      activityId: null, // 活动id
      show: false, // 中奖记录显示状态
      list: [], // 总奖池
      luckCouponList_4: [], // 4等奖奖池
      luckCouponList_3: [], // 3等奖奖池
      luckCouponList_2: [], // 2等奖奖池
      page: 1, // 中奖记录页码
    }
  },

  mounted () {
    document.title = '抽奖'
    this.activityId = this.$route.query.activityId
    this.getEncourageList()
  },
  methods: {
    // 获取中奖号码,分配到不同的奖池
    getEncourageList () {
      getMemberGiftRecordByActivity({ activityId: this.activityId }).then(res => {
        res.data.result.map(item => {
          item.sp = item.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
          item.state = 0
          item.numArr = []
          item.bok = true
          let str = String(item.randomNumber)
          for (var i = 0; i < str.length; i++) {
            item.numArr.push(parseInt(str[i]))
          }

          if (item.giftName == 4) {

            this.luckCouponList_4.push(item)
          }
          if (item.giftName == 3) {

            this.luckCouponList_3.push(item)
          }
          if (item.giftName == 2) {

            this.luckCouponList_2.push(item)
          }
        })
        // 倒序列表 4，3，2，1
        this.list = res.data.result.sort(this.compare('giftName'))
        this.init()
      })
    },
    // 初始化信息 分配抽奖轮次对应奖池
    init () {
      this.aniState = true
      this.aniState2 = false
      this.page = 1
      this.num = []
      if (this.oType == 0) {
        this.num = this.luckCouponList_4.slice(0, 30)
      } else if (this.oType == 1) {
        this.num = this.luckCouponList_4.slice(30, 55)
      } else if (this.oType == 2) {
        this.num = this.luckCouponList_3.slice(0, 30)
      }
      else if (this.oType == 3) {
        this.num = this.luckCouponList_2.slice(0, 10)
      }
    },
    // 开始抽奖
    raffle () {
      if (this.aniState) {
        this.aniState = false
        this.raffleActive()
      } else {
        console.log("请勿重复点击")
      }

    },
    // 下一轮按钮
    nextRaffle () {
      if (this.aniState2) {

        console.log(this.oType)
        if (this.oType >= 3) {
          // this.overAll()
          return false
        } else {
          this.oType++
          this.init()
        };
      } else {
        alert("请稍后")
      }
    },
    // 抽奖流程
    raffleActive () {
      // 获取中奖号码的服务卡id
      let ids = []
      this.num.map(item => {
        ids.push(item.memberServiceCardId)
      })
      let index = 0
      let timer = setInterval(() => {
        this.num[index].bok = !this.num[index].bok
        index++
        if (index >= this.num.length) {
          clearInterval(timer)
          index = 0
          console.log("结束")
          this.num.map(item => {
            item.bok = false
          })
          // this.aniState2 = true
          setTimeout(() => {
            this.aniState2 = true
            console.log("可以开始下一轮")
          }, 25000)
        }
      }, 600)
      let strIds = ids.toString()
      // 根据id批量更新卡信息
      resetServiceCardStatusByIds({ ids: strIds }).then(res => {
        ids.map(id => {
          if (this.oType == 0 || this.oType == 1) {
            this.luckCouponList_4.map(item => {
              if (id == item.memberServiceCardId) {
                item.state = 1
              }
            })
          }
          if (this.oType == 2) {
            this.luckCouponList_3.map(item => {
              if (id == item.memberServiceCardId) {
                item.state = 1
              }
            })
          }
          if (this.oType == 3) {
            this.luckCouponList_2.map(item => {
              if (id == item.memberServiceCardId) {
                item.state = 1
              }
            })
          }

        })
      })
    },
    // 抽奖全部完成 更新全部卡信息
    overAll () {
      resetServiceCardStatusByActivityId({ activityId: this.activityId }).then(res => {
      })
    },

    nextHandle () {
      if (this.page >= 4) {
        return false
      }
      this.page++
    },
    // 排序
    compare (property) {//property:根据什么属性排序
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        /*
        * value2 - value1; ——> 降序
        * value1 - value2; ——> 升序
        */
        return value2 - value1;//升序排序
      }
    },
    // 设置中奖标题
    setTitle () {
      let str = ""
      if (this.page == 1 || this.page == 2) {
        str = "四等奖"
      }
      if (this.page == 3) {
        str = "三等奖"
      }
      if (this.page == 4) {
        str = "二等奖"
      }
      return str
    },
    // 设置抽奖记录
    setLuckHistoryList () {
      if (this.page == 1) {
        return this.luckCouponList_4.slice(0, 30)
      }
      if (this.page == 2) {
        return this.luckCouponList_4.slice(30, 55)
      }
      if (this.page == 3) {
        return this.luckCouponList_3
      }
      if (this.page == 4) {
        return this.luckCouponList_2
      }
    }
  }
}
</script>
<style>
body {
  width: 1920px;
  max-width: 1920px;
}
</style>
<style scoped lang="scss">
.wrap {
  width: 1920px;
  height: 1080px;
  background: url('../../assets/fx/test2page.png') no-repeat;
  background-size: cover;

  overflow: hidden;
}
.view-router {
  background: transparent;
  padding: 0;
  overflow: hidden;
  height: auto;
}
.flex-Box {
  display: flex;
  flex-wrap: wrap;
  width: 1290px;
  height: 648px;
  padding: 60px;
  margin: 216px auto 0;
  background-image: url('../../assets/fx/ff.png');
  background-repeat: no-repeat;
  background-size: cover;
  .flex {
    display: flex;
    justify-content: space-around;
    // background: url(../../assets/fx/t1.png) no-repeat;
    // background-size: cover;
    width: 162px;
    height: 58px;
    align-items: center;
    margin: 0 90px 36px 0;
    overflow: hidden;
  }
}
.flex-Box-2 {
  display: flex;
  flex-wrap: wrap;
  width: 1290px;
  height: 365px;
  padding: 60px;
  margin: 380px auto 0;
  background-image: url('../../assets/fx/22222.png');
  background-repeat: no-repeat;
  background-size: contain;
  align-content: start;
  .flex {
    display: flex;
    justify-content: space-around;
    // background: url(../../assets/fx/t1.png) no-repeat;
    // background-size: cover;
    width: 162px;
    height: 58px;
    align-items: center;
    margin: 10px 90px 90px 0;
    overflow: hidden;
  }
}

.flex:nth-of-type(5n) {
  margin-right: 0;
}
.flex > li {
  color: #fff;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  margin: 0px 0 0 0;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.contoniner {
  margin: 214px 159px 0;
  display: flex;
  flex-wrap: wrap;
  // position: absolute;
  // top: 214px;
  // left: 159px;
  p {
    width: 242px;
    height: 87px;
    color: #fff;
    text-align: center;
    line-height: 87px;
    font-size: 60px;
    margin: 0 90px 20px 0;
  }
  p:nth-of-type(5n) {
    margin-right: 0;
  }
}
@keyframes mymove1 {
  0% {
    top: 776px;
  }
  50% {
    top: 746px;
  }
  100% {
    top: 776px;
  }
}
@keyframes mymove2 {
  0% {
    top: 914px;
  }
  50% {
    top: 944px;
  }
  100% {
    top: 914px;
  }
}
@keyframes mymove3 {
  0% {
    top: 853px;
  }
  50% {
    top: 893px;
  }
  100% {
    top: 853px;
  }
}
@keyframes mymove4 {
  0% {
    top: 848px;
  }
  50% {
    top: 878px;
  }
  100% {
    top: 848px;
  }
}
.list {
  // margin-left: 82px;
  // margin-top: 70px;
  position: relative;
  z-index: 10;
  margin: 70px auto 0;
  width: 1696px;
  display: flex;
  flex-wrap: wrap;
  // margin-right: -100px;

  li {
    .d-item {
      width: 242px;
      height: 80px;
      border-radius: 12px;
      color: #fff;
      text-align: left;
      letter-spacing: 3px;
      text-align: center;
      margin-right: 100px;
      margin-bottom: 60px;
    }
    .d-item:nth-of-type(5n) {
      margin-right: 0;
    }
    p {
      margin: 0;
      padding: 0;
      font-size: 60px;
      line-height: 40px;
    }
    span {
      display: block;
      font-size: 39px;
      color: #fff;
      font-weight: normal;
      letter-spacing: 0px;
      line-height: 40px;
    }
  }
  li:nth-of-type(5n) {
    .d-item {
      margin-right: 0;
    }
  }
}
.back {
  width: 180px;
  height: 70px;
  display: block;
  margin: 72px 0 0 70px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.next-icon {
  width: 180px;
  height: 70px;
  display: block;
  margin: 72px 0 0 70px;
  cursor: pointer;
  position: absolute;
  right: 70px;
  top: 0;
  z-index: 10;
}
h3 {
  color: #fff;
  font-size: 40px;
  font-weight: normal;
  position: absolute;
  width: 180px;
  height: 70px;
  left: 280px;
  top: 30px;
  line-height: 70px;
  z-index: 10;

  // min-width: 108px;
}
.lh1 {
  width: 104px;
  height: 70px;
  position: absolute;
  left: 95px;
  top: 613px;
}
.lh2 {
  width: 104px;
  height: 70px;
  position: absolute;
  left: 103px;
  top: 776px;
  animation: mymove1 4s ease infinite;
}
.lh3 {
  width: 160px;
  height: 106px;
  position: absolute;
  left: 392px;
  top: 914px;
  animation: mymove2 4s ease infinite;
}
.lh4 {
  width: 104px;
  height: 70px;
  position: absolute;
  left: 1310px;
  top: 853px;
  animation: mymove3 4s ease infinite;
}
.lh5 {
  width: 207px;
  height: 137px;
  position: absolute;
  right: 140px;
  top: 848px;
  animation: mymove4 4s ease infinite;
}
.lh6 {
  width: 104px;
  height: 70px;
  position: absolute;
  right: 148px;
  top: 730px;
}
.detail {
  width: 1920px;
  height: 1080px;
  // background: url(../../assets/fx/11.png) no-repeat 100% 100%;
  // background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  // position: relative;
}
.detail-bg {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.showm {
  width: 283px;
  height: 70px;
  position: absolute;
  top: 65px;
  right: 100px;
  cursor: pointer;
}
.btnBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 746px;
  margin: 0 auto;
  // position: absolute;
  // bottom: 0;
}
.btn {
  width: 357px;
  height: 110px;
  display: block;
  margin: 70px 0 0;
  cursor: pointer;
}
</style>

